<template>
  <div>
  <a-card :bordered="false" class="mb10 searchCard">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="标题">
              <j-input placeholder="请输入标题" v-model="queryParam.title"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="发布状态">
              <a-select v-model="queryParam.status" placeholder="请选择" :allowClear="true" >
                <a-select-option value="null">全部</a-select-option>
                <a-select-option value="1">未审核</a-select-option>
                <a-select-option value="2">展示中</a-select-option>
                <a-select-option value="3">未通过</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="10">
              <a-form-item label="记录时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-range-picker
                  v-model="queryParam.createTimeRange"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onDateChange"
                  @ok="onDateOk"
                />
              </a-form-item>
            </a-col>
          </template>

          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="12" >
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
               <a @click="handleToggleSearch" style="margin-left: 18px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </a-col>
          </span>

        </a-row>
      </a-form>
    </div>
  </a-card>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-button type="primary" icon="delete" @click="batchDel">批量删除</a-button>
      </div>
    <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600"
        >{{ selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table bordered
          ref="table"
          class="table-user"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          :loading="loading"
          @change="handleTableChange">

            <template slot="status" slot-scope="t,r,i">
              <a-tag :color="getStatus(t).color"> {{getStatus(t).text}} </a-tag>
            </template>

            <template slot="action" slot-scope="t,r,i">
              <a href="javascript:void(0);"  @click="detail(r)" >详情</a>
              <a-divider type="vertical" />
              <a href="javascript:void(0);"  :class="[r.status !== 1 ? 'disabledLink' : null]" @click="handleVerify(r)" >审核</a>
              <a-divider type="vertical" />
              <a href="javascript:void(0);"  @click="handleDel(r.id)">删除</a>
            </template>

        </a-table>
      </div>
    <!-- table区域-end -->
  </a-card>

    <good-things-verify-modal ref="verifyModal" @ok="loadData"></good-things-verify-modal>

  </div>
</template>

<script>
  import { KsListMixin } from '@/mixins/KsListMixin'
  import JEllipsis from '@/components/ksource/JEllipsis'
  import JTreeSelect from '@/components/ksource/JTreeSelect'
  import moment from "moment";
  import GoodThingsVerifyModal from './modules/GoodThingsVerifyModal'

  export default {
    name: "GoodThingsList",
    mixins:[KsListMixin],
    components: {
       JEllipsis,
       JTreeSelect,
       GoodThingsVerifyModal
    },
    data () {
      return {

        columns:[
            {
            title: '序号',
            width: 80,
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'title' },
          },
          {
            title: '记录时间',
            width: 150,
            dataIndex: 'createTime',
            customRender: (text) => {
              return moment(text).format("YYYY-MM-DD");
            },
          },
          {
            title: '记录人（学号）',
            dataIndex: 'createUserText',
          },
          {
            title: '所在学校',
            dataIndex: 'createDept',
          },
          {
            title: '发布状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' },
          },
          {
            title: '操作',
            dataIndex: '',
            width: 200,
            scopedSlots: { customRender: 'action' },
            align:"center",
          }
        ],
        url: {
          list: '/goodThings/list',
          delete:'/goodThings/delByIds',
          deleteBatch:'/goodThings/delByIds',
        },
        // 表头
        labelCol: {
          xs: { span: 4 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 20 },
          sm: { span: 20 },
        },
      }
    },
    computed:{
    },
    methods: {
      detail(record) {
        this.$router.push({
          path:'/platform/goodThingsDetail',
          query:{id: record.id}
        });
      },
      handleVerify(record) {
        if (record.status !== 1) {
          this.$message.warn('记录不可重复审核!');
          return;
        }
        this.$refs.verifyModal.show(record);
      },
      filterDictText(dictOptions, text) {
        if (dictOptions instanceof Array) {
          for (let dictItem of dictOptions) {
            if (text === dictItem.value) {
              return dictItem.text
            }
          }
        }
        return text||text=='null'?'':text
      },

      onDateChange: function (value, dateString) {
        console.log(dateString[0],dateString[1]);
        this.queryParam.createTime_begin=dateString[0];
        this.queryParam.createTime_end=dateString[1];
      },
      onDateOk(value) {
        console.log(value);
      },

      getStatus(status) {
        let text = "未知", color = "";
        if (status == 1) {
          text = "未审核";
          color = "red";
        } else if (status == 2) {
          text = "展示中";
          color = "blue";
        } else {
          text = "未通过";
          color = "orange";
        }
        return {text:text,color:color}
      },

    }
  }
</script>

<style scoped>
  .disabledLink {
    color: #1890FF;
    opacity: .6;
    cursor: not-allowed;
  }

</style>